<!doctype html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <title>CSS3 3D鼠标滑过翻转按钮DEMO演示</title>

    <style>
        /*** common ***/
        html, body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            background-color:beige;
            color: rgb(6, 106, 117);
        }

        .cubeshape {
            width: 300px;
            text-align: center;
            margin: 0 auto;
            height: 60px;
            text-transform: uppercase;
            font-family: sans-serif;
        }

        h1 {
            font-size: 1.5em;
            font-weight: lighter;
        }


        h1 a {
            padding: 16px 0px;
        }


        .cubeshape a {
            color: white;
            text-decoration: none;
            width: 300px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .container-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 800px;
            text-align: center;
        }

        /******************/
        /**** BUTTON 1 ****/
        .toggle-button {
            display: inline-block;
            vertical-align: middle;
        }

        .cube {

            -webkit-transition: -webkit-transform .33s;
            transition: transform .33s; /* Animate the transform properties */

            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }


        .first_cube,.second_cube {
            background: #95CDCE;
            height: 60px;
            width: 100%;
            position: relative;
        }

        .first_cube {
            border-bottom: 4px solid #56A8A9;
            -webkit-transform: translateZ(30px);
            transform: translateZ(30px);
        }

        .second_cube {
            border-top: 4px solid #56A8A9;
            margin-top: -2px;
            -webkit-transform: rotateX(-90deg) translateZ(-30px);
            transform: rotateX(-90deg) translateZ(-30px);


        }

        .cube:hover {
            -webkit-transform: rotateX(89deg);
            transform: rotateX(89deg);

        }

        /******************/
        /**** BUTTON 2 ****/

        .toggle-button-2 {
            display: inline-block;
            vertical-align: middle;
            padding-top: 16px;
            margin-left: 15px;
        }

        .cube2 {
            -webkit-transition: -webkit-transform 0.8s;
            transition: transform 0.8s; /* Animate the transform properties */

            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }


        .first_cube2, .second_cube2 {
            background: #EF717A;
            height: 60px;
            width: 100%;
            position: relative;
        }

        .first_cube2, .second_cube2 {
            position: absolute;
            backface-visibility: hidden;
        }

        .first_cube2 {
            border-bottom: 4px solid #D95459;
            transform: perspective(600px) rotateX(0);
        }

        .second_cube2 {
            border-top: 4px solid #D95459;
            margin-top: -2px;
            transform: perspective(600px) rotateX(180deg);
        }

        .toggle-button-2:hover .cube2 {
            transform: rotateX(180deg);
        }


        .toggle-button-2 {
            -webkit-perspective: 600px;
        }

        .Signature {
            position: absolute;
            z-index: 100;
            bottom: 20px;
            right: 20px;
            color: black;
            line-height: .2;
            font-size: .7em;
            font-family: Open Sans, sans-serif;
        }
    </style>
</head>

<body>
<div class="container-button">
    <div class="toggle-button">
        <div class="cubeshape cube">
            <div class="first_cube">
                <h1><a href="#">Codevember</a></h1>
            </div>
            <div class="second_cube">
                <h1><a href="#">Html5tricks</a></h1>
            </div>
        </div>
    </div>


    <div class="toggle-button-2">
        <div class="cubeshape cube2">
            <div class="first_cube2">
                <h1><a href="#">Codevember</a></h1>
            </div>
            <div class="second_cube2">
                <h1><a href="#">Html5tricks</a></h1>
            </div>
        </div>
    </div>
</div>



</body></html>